<html>
<head>
    <meta charset="utf-8" />
    <title>ng-grid css styling workbench</title>
    <link rel="stylesheet" type="text/css" href="../../ng-grid.css" />
    <script type="text/javascript" src="../../lib/jquery-1.9.1.js"></script>
    <script type="text/javascript" src="../../lib/angular.js"></script>
    <script type="text/javascript" src="../../build/ng-grid.debug.js"></script>

    <style>
      body {
        font-family: 'Helvetica Neue',Helvetica,Arial,sans-serif;
        font-size: 10pt;
        color: #444;
      }

      .gridContainer {
        padding-top: 80px;
      }

      .gridStyle {
        height: 300px;
        width: 600px;
        margin: 0 auto;
        border: 1px solid #ccc;
      }
    </style>
</head>
<body ng-app="myApp" ng-controller="MyCtrl" >

    <div class="gridContainer">
      <div class="gridStyle" ng-grid="gridOptions"></div>
    </div>

    <script>
      var app = angular.module('myApp', ['ngGrid']);

      app.controller('MyCtrl', ['$scope', function ($scope) {
        $scope.myData = [{ "name": "Moroni",  "age": 50, "id": 101 },
                         { "name": "Tiancum", "age": 43, "id": 102 },
                         { "name": "Jacob",   "age": 27, "id": 103 },
                         { "name": "Nephi",   "age": 29, "id": 104 },
                         { "name": "Enos",    "age": 34, "id": 105 }];

        $scope.gridOptions = {
            data: 'myData',
            showFooter: true,
            showFilter: true,
            showHeader: true,
            showColumnMenu: true,
            showGroupPanel: true,
            showSelectionCheckbox: true,
            enablePaging: true,
            enableHighlighting: true,
            enableRowReordering: true,
            enableColumnResize: true
        };
      }]);
    </script>
</body>
</html>